import * as React from 'react';
import {useEffect} from 'react';
import PropTypes from 'prop-types';
import Button from '@mui/material/Button';
import Avatar from '@mui/material/Avatar';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemText from '@mui/material/ListItemText';
import DialogTitle from '@mui/material/DialogTitle';
import Dialog from '@mui/material/Dialog';
import {blue} from '@mui/material/colors';
import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
import {DialogActions, DialogContent, TextField} from "@mui/material";
import PubSub from "pubsub-js";
import _ from "lodash";

const store = window.electron_store;
const emails = ['本地歌单', '在线歌单'];

function SimpleDialog(props) {
    const { onClose, selectedValue, open } = props;

    const handleClose = () => {
        onClose('-1');
    };

    const handleListItemClick = (value) => {
        onClose(value);
    };

    return (
        <Dialog onClose={handleClose} open={open}>
            <DialogTitle>选择添加到的歌单类型</DialogTitle>
            <List sx={{ pt: 0 }}>
                {emails.map((email) => (
                    <ListItem button onClick={() => handleListItemClick(email)} key={email}>
                        <ListItemText primary={email} />
                    </ListItem>
                ))}
            </List>
        </Dialog>
    );
}

SimpleDialog.propTypes = {
    onClose: PropTypes.func.isRequired,
    open: PropTypes.bool.isRequired,
    selectedValue: PropTypes.string.isRequired,
};
function ListDialog(props) {
    const { onClose, data, open } = props;
    //console.log(open)


    /**
     * 格式：
     * [
     *  {
     *      id:time,
     *      name:'',
     *      musicList:[]
     *  },
     *  {
     *      id:time,
     *      name:'',
     *      musicList:[]
     *  },
     * ]
     */
    const [localList, setLocalList] = React.useState([]);
    const handleClose = () => {
        onClose();
    };
    const handleListItemClick = (value) => {
        //console.log(value)
        for (const list of localList) {
            if(list.id === value){
                if(data instanceof Array){
                    list.musicList = _.concat(list.musicList,data);
                }else {
                    list.musicList.push(data);
                }
                store.set('localList',localList);
                break;
            }
        }
        //console.log(localList);
        handleClose();
    };
    useEffect((r) => {
        setLocalList(store.get('localList') || []);
        //console.log(localList);
    },[])

    return (
        <Dialog onClose={handleClose} open={open}>
            <DialogTitle>选择添加到的歌单</DialogTitle>
            <List sx={{ pt: 0 }}>
                {localList.map((r) => (
                    <ListItem button onClick={() => handleListItemClick(r.id)} key={r.id}>
                        <ListItemAvatar>
                            <Avatar sx={{ bgcolor: blue[100], color: blue[600] }}>
                                <LibraryMusicIcon />
                            </Avatar>
                        </ListItemAvatar>
                        <ListItemText primary={r.name} />
                    </ListItem>
                ))}
                <AddLocal init={setLocalList}/>
            </List>
        </Dialog>
    );
}
function AddLocal(props) {
    const [open, setOpen] = React.useState(false);
    const {init} = props;

    const handleListItemClick = (value) => {
        setOpen(true);
    };
    const handleClose = () => {
        setOpen(false);
    };
    let text = "";
    const handleChange = (e) => {
        text = e.target.value;
    };
    const handleOK = () => {

        //console.log(text)
        let originList = store.get('localList') || [];
        originList.push({
            id:new Date().getTime(),
            name:text,
            musicList:[]
        })
        store.set('localList',originList);
        init(originList);
        setOpen(false);
    };
    return (
        <>
            <ListItem button onClick={handleListItemClick}>
                <ListItemText primary="添加歌单" />
            </ListItem>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>请输入歌单名</DialogTitle>
                <DialogContent>
                    <TextField
                        autoFocus
                        margin="dense"
                        id="name"
                        label="歌单名"
                        type="text"
                        fullWidth
                        variant="standard"
                        onChange={handleChange}
                    />
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose}>取消</Button>
                    <Button onClick={handleOK}>确定</Button>
                </DialogActions>
            </Dialog>
        </>
    );
}

export default function AddMenu(props) {
    const [open, setOpen] = React.useState(false);
    const [selectedValue, setSelectedValue] = React.useState(emails[1]);
    const [openList, setOpenList] = React.useState(false);
    const [data, setData] = React.useState(null);

    useEffect(() => {
        PubSub.subscribe('addMenuSong',addMenuSong);
        PubSub.subscribe('addMenuList',addMenuList);
    },[])
    const addMenuSong = (msg,data) => {
        setOpen(true);
        //console.log(data)
        setData(data);
    }
    const addMenuList = (msg,data) => {

    }
    const handleChoice = (value) => {
        //console.log(value)
        if(value === -1 || value === '-1'){
            setOpenList(false);
            setOpen(false);
        }else {
            setSelectedValue(value);
            setOpenList(true);
            setOpen(true);
        }
    };

    const handleClose = () => {
        setOpenList(false);
        setOpen(false);
    };
    return (
        <div>
            {openList?


                    <ListDialog
                        open={open}
                        onClose={handleClose}
                        data={data}
                    />

                :

                <SimpleDialog
                selectedValue={selectedValue}
                open={open}
                onClose={handleChoice}
                />

            }
        </div>
    );
}